<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">详情</div>
                <div>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="addtitle">房屋信息</div>
            <div class="detailcontent">
                <!-- scope.row.beginTime == null ? '' : scope.row.beginTime.trim().split(' ')[0] -->
                <div class="detailitem1">{{ projectdetail.fwdz }}</div>
                <div class="detailitem">管房单位：{{ projectdetail.gfdw }}</div>
                <div class="detailitem">档案编号：{{ projectdetail.dabh }}</div>
                <div class="detailitem">房屋性质：{{ projectdetail.fwyt }}</div>
                <div class="detailitem">房屋结构：{{ projectdetail.fwjg }}</div>
                <div class="detailitem">产权单位：{{ projectdetail.cqdw }}</div>
                <div class="detailitem">建筑年代：{{ projectdetail.jznd }}</div>
                <div class="detailitem">建筑面积：{{ projectdetail.jzmj }}</div>
                <div class="detailitem">建筑形式：{{ projectdetail.jzxs }}</div>
                <div class="detailitem">管理方式：{{ projectdetail.glfs }}</div>
            </div>
            <div class="addtitle">
                现使用人信息
                <el-button type="primary" size="mini" @click="buildedit">编辑</el-button>
                <el-button type="primary" size="mini" @click="getSyrlist">使用人记录</el-button>
            </div>
            <el-form ref="form" :model="editform" label-width="120px" :inline="true" label-position="top">
                <el-form-item label="现使用人姓名:" style="width: 30%" prop="qdsj">
                    <el-input v-model="editform.xsyr" placeholder="请输入合同编号" class="search-input"> </el-input>
                </el-form-item>
                <el-form-item label="备注:" style="width: 92%" prop="jmyy">
                    <el-input
                        v-model="editform.syqkbz"
                        placeholder="请输入备注"
                        class="search-input"
                        type="textarea"
                        :autosize="{ minRows: 4 }"
                    ></el-input>
                </el-form-item>
                <div style="size: 14px; color: #606266; margin: 10px 0">附件</div>
                <el-upload
                    class="upload-demo"
                    :action="httpUrl + '/file/uploadFile'"
                    :on-remove="handleRemoves"
                    :before-remove="beforeRemoves"
                    multiple
                    :on-success="(response, file, fileList, filetype) => handleUpSuccess1(response, file, fileList, filetype, 7)"
                    :headers="myHeaders"
                    :file-list="fileList"
                    ref="upload7"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <el-table :data="sbtableData" style="width: 100%" border>
                    <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                    <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <router-link
                                target="_blank"
                                :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                style="color: #008a94"
                                v-if="
                                    scope.row.fj[0].suffix == '.docx' ||
                                    scope.row.fj[0].suffix == '.doc' ||
                                    scope.row.fj[0].suffix == '.xls' ||
                                    scope.row.fj[0].suffix == '.xlsx'
                                "
                                >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                            </router-link>
                            <el-button
                                type="text"
                                size="small"
                                @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                v-else
                                >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                            ></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                style="color: blue; text-decoration: underline"
                                >{{ scope.row.wjmc }}</el-button
                            >
                        </template>
                    </el-table-column>
                    <el-table-column prop="cjsj" label="上传时间" align="center">
                        <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.row.id, 'pzxx')" style="color: red"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <el-dialog title="使用人记录" :visible.sync="syrshow" :modal-append-to-body="false" center width="80%">
                <div style="overflow: hidden">
                    <el-table :data="syrlist" style="width: 100%" border max-height="500">
                        <el-table-column label="使用人" align="center" prop="syr"></el-table-column>
                        <el-table-column label="起始日期" align="center" prop="qsrq">
                            <template slot-scope="scope">
                                {{ scope.row.qsrq ? scope.row.qsrq.split(' ')[0] : '' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="终止日期" align="center" prop="zzrq">
                            <template slot-scope="scope">
                                {{ scope.row.zzrq ? scope.row.zzrq.split(' ')[0] : '' }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination" style="float: right">
                        <el-pagination
                            background
                            layout="total,prev, pager, next"
                            :total="total"
                            :current-page.sync="current"
                            :page-size="pageSize"
                            @current-change="handleCurrentChange"
                        >
                        </el-pagination>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { builddetail, download, redownload, sbfjlist, sbfjadd, sbfjdelete, buildedit, syrjllist } from '@/api/index';
import global from '@/components/common/httpurl.vue';
import fileType from '../vo/filetype';
export default {
    name: 'htdetail',
    data() {
        return {
            syrshow: false,
            buildid: '',
            // 文件列表传参
            sbform: {},
            editform: {},
            fjtable: [], //附件列表
            fileType: fileType,
            httpUrl: global.httpUrl, //公共地址
            filefileList: [], //文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                token: '123'
            },
            form: {
                jmje: 0
            },
            fileList: [],
            tableData: [], //可编辑表格
            sbtableData: [],
            projectdetail: {}, //楼幢详情
            sbqd: [], //设备清单
            form: {},
            syrlist: [],
            total: 0,
            current: 1,
            pageSize: 10,
            syrform: {
                buildid: '',
                pageSize: 10,
                current: 1
            },
            signid: '',
            type: this.$store.getters.type
        };
    },
    methods: {
        // 文件预览
        redownload(id, name, type) {
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            redownload(data).then((res) => {
                console.log(res);
                this.srcList = [];
                let blob = new Blob([res], {
                    type: filetype
                });
                let url = window.URL.createObjectURL(blob);
                this.url = url;
                this.srcList.push(url);
                // this.dialogshow = true
                window.open(url, '_blank');
            });
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id);
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            download(data).then((res) => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res);
            });
        },
        // 创建
        submitForm() {
            this.form.sbqd = this.sbqd.toString();
            this.form.zjList = this.tableData;
            console.log(this.form);
            signlistadd(this.form).then((res) => {
                if (res.code == 200) {
                    this.$message.success('创建成功');
                    this.$router.go(-1);
                } else {
                    this.$message.error('创建失败');
                }
            });

            console.log('提交确定');
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件
        handleRemoves(file, fileList, filetype) {
            console.log(file);
            console.log('filetype', filetype);
        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file);
            console.log(fileList);
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        async handleUpSuccess1(response, file, fileLists, filetype, num) {
            console.log(fileLists);
            console.log('filetype', filetype);
            this.$message.success('导入成功');
            await fileLists.forEach((item) => {
                console.log(item.response.data);
                let data = {
                    wjmc: item.response.data.filename,
                    buildid: this.buildid,
                    fj: item.response.data.id,
                    wjlx: num
                };
                console.log(data);
                this.sbfjadd(data);
            });
            this.$nextTick(() => {
                this.$refs['upload' + num].clearFiles();
            });
        },
        // 附件新增
        sbfjadd(data) {
            sbfjadd(data).then((res) => {
                console.log('上传文件！！');
                this.sbfjlist(this.sbform);
            });
        },
        // 删除
        deleteRow(e) {
            console.log(e);
            this.$confirm('确定删除此文件吗？')
                .then(() => {
                    console.log(e);
                    let data = {
                        id: e
                    };
                    this.sbfjdelete(data);
                    this.$message.success('删除成功');
                })
                .catch(() => {
                    this.$message.error('删除取消');
                });
        },
        // 附件删除
        sbfjdelete(data) {
            sbfjdelete(data).then((res) => {
                console.log('删除文件！！');
                this.sbfjlist(this.sbform);
            });
        },
        // 水表附件列表
        sbfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.sbtableData = res.data.records;
                } else {
                    this.sbtableData = [];
                }
            });
        },
        // 楼幢详情
        builddetail(data) {
            builddetail(data).then((res) => {
                this.projectdetail = res.data;
                this.buildid = res.data.id;
                // 文件列表接口操作
                this.sbform = {
                    buildid: res.data.id,
                    wjlx: 7
                };
                this.sbfjlist(this.sbform);
                this.editform = {
                    id: res.data.id,
                    xsyr: res.data.xsyr,
                    syqkbz: res.data.syqkbz
                };
            });
        },
        // 编辑
        buildedit() {
            if (this.editform.xsyr) {
                buildedit(this.editform).then((res) => {
                    if (res.code == 200) {
                        this.$message.success('编辑成功');
                    } else {
                        this.$message.error('编辑失败');
                    }
                });
            } else {
                this.$message.error('请填写现使用人');
            }
        },
        // 获取使用人记录列表
        getSyrlist() {
            this.current = 1;
            this.syrform = {
                buildid: this.buildid,
                pageSize: 10,
                current: 1
            };
            this.syrjllist(this.syrform);
            this.syrshow = true;
        },
        syrjllist(data) {
            syrjllist(data).then((res) => {
                if (res.code == 200) {
                    this.syrlist = res.data.records;
                    this.total = res.data.total;
                } else {
                    this.total = 0;
                    this.syrlist = [];
                }
            });
        },
        handleCurrentChange(val) {
            this.current = val;
            this.syrform.current = val;
            this.syrjllist(this.syrform);
        }
    },
    created() {
        let data = {
            id: this.$route.params.id
        };
        this.builddetail(data);
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008a94;
}
</style>